<template>
	<view class="dialog-content">
		<view class="dialog-title">{{title}}</view>
		<view class="content">{{content}}</view>
		<view class="dialog-button">
			<view class="button-text cancel-text" @click="cancel">{{cancelText}}</view>
			<view class="button-text" @click="confirm">{{confirmText}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			title: {
				type: String,
				default: '提示'
			},
			content: {
				type: String,
				default: '欢迎使用对话框'
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			confirmText: {
				type: String,
				default: '确定'
			}
		},
		methods: {
			confirm () {
				this.$emit('confirm')
			},
			cancel () {
				this.$emit('cancel')
			}
		}
	}
</script>

<style lang="scss">
	.dialog-content {
		background-color: #fff;
		width: 600rpx;
		height: 260rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
	}
	.dialog-title{
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		line-height: 70rpx;
		font-size: 26rpx;
		text-align: center;
		background-color: $uni-color-primary;
		color: #fff;
	}
	.content{
		text-align: center;
		line-height: 90rpx;
	}
	.dialog-button{
		border-top: 1rpx solid #e9e9e9;
		line-height: 90rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.button-text{
		width: 50%;
		text-align: center;
	}
	.cancel-text{
		border-right: 1rpx solid #e9e9e9;
	}
</style>
